.site-header {
  background-color: #1a1a1a;
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
  }

  .logo {
    a {
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      text-decoration: none;
      letter-spacing: -0.02em;
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .main-navigation {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 32px;

      li {
        .nav-link {
          text-decoration: none;
          color: #ffffff;
          font-size: 16px;
          font-weight: 400;
          opacity: 0.8;
          transition: all 0.3s ease;
          position: relative;
          padding: 8px 0;

          &:hover {
            opacity: 1;
          }

          &.active,
          &.router-link-active {
            opacity: 1;
            color: #ffffff;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              height: 2px;
              background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
              border-radius: 1px;
            }
          }
        }
      }
    }
  }

  .header-actions {
    .cta-button {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50px;
      padding: 12px 24px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(10px);

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      .arrow-icon {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
      }

      &:hover .arrow-icon {
        transform: translateX(2px);
      }
    }
  }
}

// 为固定头部添加body padding
body {
  padding-top: 80px;
}

// 响应式设计
@media (max-width: 768px) {
  .site-header {
    padding: 16px 0;
    
    .container {
      padding: 0 16px;
    }

    .main-navigation {
      ul {
        gap: 20px;
        
        li .nav-link {
          font-size: 14px;
        }
      }
    }

    .header-actions {
      .cta-button {
        padding: 10px 20px;
        font-size: 13px;
        
        .arrow-icon {
          width: 14px;
          height: 14px;
        }
      }
    }
  }
  
  body {
    padding-top: 70px;
  }
}

@media (max-width: 480px) {
  .site-header {
    .main-navigation {
      ul {
        gap: 16px;
      }
    }

    .header-actions {
      .cta-button {
        span {
          display: none;
        }
        
        padding: 10px;
        min-width: 40px;
        justify-content: center;
      }
    }
  }
}